<!DOCTYPE html>
<html lang="en">
<!--
 NOTE: the code will run into security problem if load the html from local
       disk and try to drop a local picture. The html must be load from a 
       web server.

-->
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=620">
    <title>File API Demo</title>
    <link rel="stylesheet" href="css/checkin.css">
    <!--script src="js/checkin-utils.js"></script-->
    <script src="js/checkin.js"></script>
</head>
<body>

<style>
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
</style>

<article>
  <div id="holder"></div> 
  <p id="status">Check in tool</p>
  <p>Drag the check in record file in JSon format to the drop zone above.</p>
</article>
<script>
    console.log("kevin zhang");
    var holder = document.getElementById('holder'),
    state = document.getElementById('status');

	if (typeof window.FileReader === 'undefined') {
	  state.className = 'fail';
	} else {
	  state.className = 'success';
	  state.innerHTML = 'File API & FileReader available';
	}
	 
	var reader = new FileReader();
    var checkinRecord;
    reader.onload = function (event) {
	    console.log("in reader onload");
	    console.log(event.target);
	    //holder.style.background = 'url(' + event.target.result + ') no-repeat center';
	    var tmp = event.target.result;
        console.log(tmp); 
        checkinRecord = JSON.parse(tmp);
        calcCheckIn(checkinRecord);
	};
	
	reader.onerror = function(event) {
	    console.log(event);
	};
	
	holder.ondragover = function () { this.className = 'hover'; return false; };
	holder.ondragend = function () { this.className = ''; return false; };
	holder.ondrop = function (e) {
	    console.log("in holder ondrop");
	    this.className = '';
	    e.preventDefault();
	
	    var fileName = e.dataTransfer.files[0];
	    console.log(fileName);
	
	
	    /*reader.onload = (function(theFile) {
	        return function(e) {
	            console.log(e.target.result);
	            console.log(["the file name", escape(theFile.name)].join(''));
	        };
	    })(file);*/
	      
	    reader.readAsText(fileName);
	
	    return false;
	    //return true;
	};
</script>
</body>
</html>
